<template>
    <div class="Login">
        <div class="login_Content">
            <div class="login__content_menu">
                <ul>
                    <div v-if="getMenuIndex===0|| getMenuIndex===1" style="width: 100%;height: 100%;display: flex;align-items: center;">
                        <li v-for="(item,index) in MenuList" :key="index" @click="MenuClick(item,index)">
                        <span :class="getMenuIndex===index?'Click_sty':''">{{item.title}}</span>
                    </li>
                    </div>
                    <li v-else-if="getMenuIndex===2">
                        <span class="Click_sty">欢迎注册</span>
                    </li>
                    <li v-else-if="getMenuIndex===3">
                        <span class="Click_sty">忘记密码</span>
                    </li>
                </ul>
            </div>
            <div class="login_box">
                <AccountLogin v-if="getMenuIndex===0"></AccountLogin>
                <Register v-else-if="getMenuIndex===2"></Register>
                <Rember v-else></Rember>
            </div>
            <div class="login_other" v-if="getMenuIndex == 1 || getMenuIndex == 0">
                <el-link type="primary" :underline="false" @click="NouserClick(2)">立即注册</el-link>
            </div>
            <div class="login_other" v-else>
                <el-link target="_blank" :underline="false" @click="NouserClick(0)">返回登录</el-link>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name:"Login",
    components:{
        AccountLogin:()=>import("./Account_login.vue"),
        CodeLogin:()=>import("./Code_login.vue"),
        Register:()=>import("./Register.vue"),
        Rember:()=>import('./Rember.vue')
    },
    data(){
        return{
            MenuList:[
                {
                    title:"账号登录",
                    label:"account"
                }
            ],
        }
    },
    methods:{
        MenuClick(item,index){
            this.$store.commit("SET_MENUINDEX",index)
        },
        NouserClick(type){
            this.$store.commit("SET_MENUINDEX",type)
        },
    },
    computed:{
        getMenuIndex(){
            return this.$store.state.login.MenuIndex
        }
    }
}

</script>

<style lang="less" scoped>
.Login{
    width: 100%;
    height: 100%;
    background: url("../../assets/bgimg/login_bac.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    .login_Content{
        width: 400px;
        max-height: 450px;
        min-height: 300px;
        background-color: #fff;
        position: absolute;
        right: 15%;
        top: 30%;
        border-radius: 10px;
        .login__content_menu{
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #f0f0f7;
            ul{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                li{
                    flex: 1;
                    text-align: center;
                    span{
                        font-size: 18px;
                        &:hover{
                            cursor: pointer;
                        }
                    }
                    .Click_sty{
                        border-bottom: 5px solid skyblue;
                        font-weight: 600;
                    }
                }
            }
        }
        .login_box{
            width: 100%;
            min-height: 200px;
            // background-color: skyblue;
        }
        .login_other{
            width: 98%;
            height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .el-link{
                margin-left: 18px;
            }
        }
    }
}
</style>